<template>
    <div class="example-tb">
        <div class="tb">
            <div class="search-info">
                <vol-form :label-width="80" ref="myform" class="my-form" :formFields="searchFields"
                    :formRules="formOptions">
                </vol-form>
                <div class="btns">
                    <el-button type="danger" size="small" @click="getSelectRows">获取选中行</el-button>
                    <el-button type="primary" size="small" @click="search"><i class="el-icon-search"></i>搜索</el-button>
                </div>
            </div>
            <vol-table ref="table" :columns="columns" :pagination-hide="false" :max-height="400" :url="url"
                :index="true" @loadBefore="loadTableBefore" @loadAfter="loadTableAfter"></vol-table>
        </div>
    </div>
</template>
<script>
import VolTable from "@/components/basic/VolTable.vue";
import VolForm from "@/components/basic/VolForm.vue";
import Good_Thing from '../goods/Good_Thing.jsx'

export default {
    components: {
        VolTable,
        VolForm,

    },
    created() { },
    data() {
        return {
            //查询条件字段
            searchFields: {
                TranNo: "",
                CreateDate: [],
                OrderType: null,
            },

            viewModel: false, //点击单元格时弹出框
            url: "api/Goods_Type/getPageData", //后从加载数据的url


            columns: [
                { field: "GoodsTypeId", title: "Order_Id", width: 90, hidden: true },
                {
                    field: "GoodsTypeName",
                    title: "GoodsTypeName",
                    type: "string",
                    edit: { type: "string" },
                    width: 130,
                    sort: true,
                },
                {
                    field: "GoodsTypeValue",
                    title: "GoodsTypeValue",
                    type: "int",
                    bind: { key: "ordertype", data: [] },
                    edit: { type: "select" },
                    width: 90,
                    sort: true,
                },
                {
                    field: "Goodsid",
                    title: "Goodsid",
                    type: "int",
                    edit: { type: "number" },
                    width: 90,
                    sort: true,
                    summary: true, //前端只设置summary: true 即可求后，后台见SellOrderService.cs中查询方法说明
                },



                {
                    field: "操作",
                    title: "操作",
                    width: 120,
                    // fixed: "right",
                    align: "center",
                    render: (h, { row, column, index }) => {
                        return h("div", { style: {} }, [
                            h("div", {}, [
                                h(
                                    "span",
                                    {
                                        class: [
                                            "el-icon-edit el-tag el-tag--success el-tag--light",
                                        ],
                                        style: {
                                            cursor: "pointer",
                                            "margin-right": "8px",
                                        },
                                        onClick: (e) => {
                                            e.stopPropagation();
                                            this.$refs.table.edit.rowIndex = index;
                                        },
                                    },
                                    "编辑"
                                ),
                                h(
                                    "span",
                                    {
                                        class: [
                                            "el-icon-delete el-tag el-tag--danger el-tag--light",
                                        ],
                                        style: {
                                            cursor: "pointer",
                                        },
                                        onClick: (e) => {
                                            e.stopPropagation();
                                            //删除行
                                            this.delClick(row);
                                        },
                                    },
                                    "删除"
                                ),
                            ]),
                        ]);
                    },
                },
            ],
        };
    },
    methods: {
        //点击查询时生成查询条件
        loadTableBefore(param, callBack) {
            console.log("加载数据前" + param);
            //生成查询条件
            param.wheres = [
                //设置为like模糊查询
                {
                    name: "TranNo",
                    value: this.searchFields.TranNo,
                    displayType: "like",
                },
                {
                    name: "OrderType",
                    value: this.searchFields.OrderType,
                },
                {
                    name: "CreateDate",
                    value: this.searchFields.CreateDate[0],
                    displayType: "thanorequal", //>=
                },
                {
                    name: "CreateDate",
                    value: this.searchFields.CreateDate[1],
                    displayType: "lessorequal", //<=
                },
            ];
            callBack(true); //此处必须进行回调，返回处理结果，如果是false，则不会执行后台查询
        },
        loadTableAfter(data, callBack) {
            //此处是从后台加数据后，你可以在渲染表格前，预先处理返回的数据
            console.log("加载数据后" + data);
            callBack(true); //同上
        },
        search() {
            //搜索
            this.$refs.table.load(null, true);
        },
        delClick(row) {
            //删除
            let tigger = false;
            this.$confirm("确认要删除选择的数据吗?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                center: true,
            }).then(() => {
                if (tigger) return;
                tigger = true;
                let url = "api/SellOrder/del";
                this.http.post(url, [row.Order_Id], "正在删除数据....").then((x) => {
                    if (!x.status) {
                        return this.$message.error(x.message);
                    }
                    this.$message.success(x.message);
                    this.search();
                });
            });
        },
    },
};
</script>

<style lang="less" scoped>
.v-header {
    background: white;
    padding: 10px;
}

.search-info {
    display: flex;

    .my-form {
        width: 840px !important;
        margin-bottom: -15px;
    }

    .btns {
        margin-left: 15px;
        position: relative;
        margin-top: 2px;
    }
}
</style>